<script setup lang="ts">
import { getCourseById, getSectionAndLesson } from '@/api/courses'
import type { TCourse, TSection } from '@/api/courses'
import SectionDialogCreateOrEdit from './SectionDialogCreateOrEdit.vue'
const props = defineProps(['courseId'])
const course = ref({} as TCourse)
const courseSectionLesson = ref([] as TSection[])
const getCourse = async () => {
  const { data } = await getCourseById(props.courseId)
  if (data.code === '000000') {
    course.value = data.data
    console.log(data)
  } else {
    ElMessage.error('获取课程基本信息失败')
    throw new Error('获取课程基本信息失败')
  }
}
const getCourseSectionAndLesson = async () => {
  const { data } = await getSectionAndLesson(props.courseId)
  if (data.code === '000000') {
    courseSectionLesson.value = data.data
    console.log(data)
  } else {
    ElMessage.error('获取课程基本信息失败')
    throw new Error('获取课程基本信息失败')
  }
}
getCourse()
getCourseSectionAndLesson()
// 章节状态文字
const sectionStatusText = [`隐__藏`, '待更新', '已发布']
// 课时状态按钮
const lessonStatusText = [`隐__藏`, '未发布', '已发布']

const sectionDlg = ref()
</script>

<template>
  <el-page-header @back="$router.go(-1)">
    <template #content>
      <div class="flex items-center">
        <span class="text-large font-600 mr-3"> {{ course.courseName }}-课程内容-章节管理 </span>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-button type="primary" class="ml-2" @click="sectionDlg.showAndInit(course)">+ 添加章节</el-button>
      </div>
    </template>
    <el-card class="box-card">
      <el-tree
        ref="tree"
        :data="courseSectionLesson"
        node-key=""
        :props="{ children: 'lessonDTOS', label: (data) => data.sectionName || data.theme }"
        empty-text=""
        :show-checkbox="false"
        :highlight-current="true"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span v-if="node.level === 1" style="margin-bottom: 20px">
              <el-button size="large" @click.stop="sectionDlg.showAndInit(course, data)">编辑</el-button>
              <el-button size="large" type="primary">添加课时</el-button>
              <el-button size="large">{{ sectionStatusText[data.status] }}</el-button>
            </span>
            <span v-else>
              <el-button @click.stop="">编辑</el-button>
              <el-button type="success">上传视频</el-button>
              <el-button>{{ lessonStatusText[data.status] }}</el-button>
            </span>
          </span>
        </template>
      </el-tree>
    </el-card>
    <SectionDialogCreateOrEdit ref="sectionDlg" />
  </el-page-header>
</template>

<style lang="scss" scoped>
:deep(.el-tree-node) {
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 18px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  padding-right: 8px;
}
</style>
